/* eslint-disable vue/no-template-shadow */
/* eslint-disable prefer-const */
<template>
  <page-header-wrapper>
    <a-row :gutter="24">
      <a-col span="24">
        <a-radio-group v-model="memberGroup" @change="()=>{this.getTableData()}" style="margin-right:1%" >
          <a-radio-button value="0">
            <a-icon type="issues-close"/> 待审核
          </a-radio-button>
          <a-radio-button value="1">
            <a-icon type="check"></a-icon> 已通过
          </a-radio-button>
        </a-radio-group>
        <!-- <a-button type="primary" style="margin-bottom:15px;margin-right:15px" @click="handleAdd()">新增</a-button> -->
        <!-- <a-button type="danger" @click="handleDelete()" style="margin-bottom:15px;margin-right:10px;margin-left:15px" :disabled="!hasSelected" :loading="confirmLoading">删除</a-button> -->
        <a-input-search placeholder="输入您要搜索的内容" enter-button @search="onSearch" style="width:16%;margin-bottom:15px" v-model="search" />
        <!-- <a @click="handleSearch()" style="float: right; font-size: 18px;"><a-icon type="search"/>查找密码</a> -->
        <span class="tips" v-if="hasSelected">{{ `您已选择了${selectedRowKeys.length}项` }}</span>
        <keep-alive>
          <a-table
            :columns="columns"
            :data-source="dataSource"
            :rowClassName="rowClassName"
            @change="handleTableChange"
            :pagination="pagination"
            :scroll="{ x: 1200 }"
            :loading="tableLoading"
          >
            // eslint-disable-next-line vue/no-template-shadow
            <span slot="membership_nature" slot-scope="membership_nature">
              <a-tag color="cyan">
                {{ membership_nature }}
              </a-tag>
            </span>
            <span slot="member_status" slot-scope="member_status">
              <a-tag color="blue" v-if="member_status==0">
                待审核
              </a-tag>
              <a-tag color="green" v-if="member_status==1">
                通过
              </a-tag>
              <a-tag color="red" v-if="member_status==2">
                已退会
              </a-tag>
              <a-tag color="orange" v-if="member_status==3">
                已复会
              </a-tag>
            </span>
            <!-- <span slot="member_type" slot-scope="member_type">
              <a-tag v-if="member_type==0" color="#2db7f5">
                本市会员
              </a-tag>
              <a-tag v-else color="#f50">
                外市会员
              </a-tag>
            </span> -->
            <template slot="action" slot-scope="text, record">
              <a @click="handleInfo(record)">详情</a>
              <a-divider type="vertical" v-if="memberGroup==1"/>
              <a-popconfirm
                v-if="memberGroup==1"
                title="确定操作?"
                okText="确定"
                cancelText="取消"
                @confirm="() => fuckOff(record)"
              >
                <a href="javascript:;" v-if="record.status===1 || record.status === 3" style="color:red">退会</a>
                <a href="javascript:;" v-if="record.status===2" >复会</a>
              </a-popconfirm>
              <a-divider type="vertical" v-if="memberGroup==0"/>
              <a-popconfirm
                v-if="memberGroup==0"
                title="确定操作?"
                okText="确定"
                cancelText="取消"
                @confirm="() => examinePass(record)"
              >
                <a href="javascript:;" >审核</a>
              </a-popconfirm>
              <a-divider type="vertical" v-if="memberGroup==0"/>
              <a-popconfirm
                v-if="memberGroup==0"
                title="确定操作?"
                okText="确定"
                cancelText="取消"
                @confirm="() => onDelete(record)"
              >
                <a href="javascript:;" style="color:red">删除</a>
              </a-popconfirm>
            </template>
          </a-table>
        </keep-alive>
      </a-col>
    </a-row>
    <a-modal
      title="会员密码查询"
      v-model="searchPassword"
      :cancel-button-props="{ style: { display: 'none' } }"
      :closable="closable"
      ok-text="确认"
      @ok="hideModal"
    >
      <a-form-model ref="showData" :model="showData" :label-col="{span:6}" :wrapper-col="{span: 17}" :rules="rules">
        <p style="color: red; margin-left: 135px;">注:只可查找已通过审核的账号</p>
        <a-alert v-if="isLoginError" type="error" showIcon style="width: 155px; margin-left: 165px; margin-top: 12px;" :message="$t('账号或密码错误')" />
        <a-form-model-item label="账号" prop="account" style="width: calc(70% - 12px); margin-left: 60px; margin-top: 12px">
          <a-input v-model="showData.account" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="密码" style="width: calc(70% - 12px); margin-left: 60px">
          <a>{{ itempassword }}</a>
        </a-form-model-item>
        <a-button @click="handleItemSearch()" type="primary" style="width: calc(30% - 12px); margin-left: 170px">查询</a-button>
      </a-form-model>
    </a-modal>
    <a-modal
      title="操作详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="保存"
      cancelText="取消"
      v-if="visible"
      width="55%"
      :maskClosable="false"
      :footer="null"
    >
      <a-form-model ref="showData" :model="showData" :label-col="{span:6}" :wrapper-col="{span: 17}" :rules="rules" >
        <!-- <a-form-model-item label="账号" prop="account" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.account"></a-input>
        </a-form-model-item>
        <a-form-model-item label="密码" prop="account" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.account"></a-input>
        </a-form-model-item>
        <a-divider orientation="left" style="margin-top:0px"></a-divider> -->
        <a-form-model-item label="企业名称" prop="enterprise_name" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.enterprise_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="工商注册号" prop="business_number" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.business_number" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="资质证书编号" prop="certificate_number" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.certificate_number"></a-input>
        </a-form-model-item>
        <a-form-model-item label="会员类型" prop="membership_nature" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.membership_nature" ></a-input>
        </a-form-model-item>
        <a-divider orientation="left">资质证书等级范围</a-divider>
        <a-form-model-item label="主项资质" prop="main_qualification" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-textarea v-model="showData.main_qualification" :autoSize="{ minRows: 3, maxRows: 5 }"></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="副项资质" prop="minor_qualification" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-textarea v-model="showData.minor_qualification" :autoSize="{ minRows: 3, maxRows: 5 }"></a-textarea>
        </a-form-model-item>
        <a-divider></a-divider>
        <a-form-model-item label="企业地址" prop="business_address" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.business_address" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="邮政编号" prop="postcode" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.postcode" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="企业法人" prop="legal_person" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.legal_person" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="企业电话" prop="enterprise_tel" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.enterprise_tel" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="总经理" prop="president" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.president" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="经理电话" prop="president_tel" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.president_tel" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="联系人" prop="contacts" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.contacts" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="联系电话" prop="contacts_tel" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.contacts_tel" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="职务" prop="password" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-input v-model="showData.contact_title" ></a-input>
        </a-form-model-item>
        <a-divider orientation="left">工商营业执照</a-divider>
        <a-form-model-item label="图片上传" :label-col="{span:'3'}" ref="upload1" :rules="[{ required: true, message: '图片不可为空', trigger: 'change'}]" prop="business_license_file">
          <a-upload
            :file-list="showData.business_license_file"
            list-type="picture-card"
            accept="image/jpeg,image/jpg,image/png"
            @preview="handlePreview"
          >
          </a-upload>
        </a-form-model-item>
        <a-divider orientation="left">资质证书</a-divider>
        <a-form-model-item label="图片上传" :label-col="{span:'3'}" ref="upload2" :rules="[{ required: true, message: '图片不可为空', trigger: 'change'}]" prop="qualification_certificate_file">
          <a-upload
            :file-list="showData.qualification_certificate_file"
            list-type="picture-card"
            accept="image/jpeg,image/jpg,image/png"
            @preview="handlePreview"
          >
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handlePreviewCancel" v-if="previewVisible" width="35%">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { memberTable, examineEdit, examineTable, statusEdit, examineDelete, memberSearch } from '@/api/memberShip'
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
  data () {
    return {
      previewImage: '',
      closable: false,
      itempassword: '',
      isLoginError: true,
      searchPassword: false,
      previewVisible: false, // 图片预览模态框flag
      // saveDisibled: null,
      memberGroup: '0', // 0为待审核表格，1为已通过表格
      tableLoading: false,
      search: '',
      status: Boolean, // 控制模态框为新增或修改，true为修改，false为新增
      // roleList: [],
      selectedRowKeys: [],
      visible: false,
      confirmLoading: false,
      showData: { business_license_file: [], qualification_certificate_file: [] },
      pagination: {
        current: 1,
        pageSize: 12,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['12', '20', '30', '50']
      },
      columns: [
        // {
        //   title: '序号',
        //   dataIndex: 'index',
        //   key: 'index',
        //   width: '5%'
        // },
        {
          title: '会员类型',
          dataIndex: 'membership_nature',
          key: 'membership_nature',
          scopedSlots: { customRender: 'membership_nature' }
        },
        {
          title: '企业名称',
          dataIndex: 'enterprise_name',
          key: 'enterprise_name'
        },
        {
          title: '账号',
          dataIndex: 'account',
          key: 'account'
          // ellipsis: true
        },
        // {
        //   title: '会员类型',
        //   dataIndex: 'member_type',
        //   key: 'member_type',
        //   scopedSlots: { customRender: 'member_type' },
        //   width: '10%'
        // },
        {
          title: '审核状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'member_status' },
          width: '10%'
        },
        {
          title: '企业地址',
          dataIndex: 'business_address',
          key: 'business_address',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          key: 'action',
          fixed: 'right'
        }
      ],
      dataSource: [],
      rules: {
        account: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        enterprise_name: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        business_number: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        certificate_number: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        member_type: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        main_qualification: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        business_address: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        legal_person: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        enterprise_tel: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        contacts: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        contacts_tel: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        president: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        president_tel: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ]
      },
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          var finalRows = selectedRows.map(e => {
            return e.uuid
          })
          this.selectedRowKeys = finalRows
          console.log(this.selectedRowKeys.length)
        },
        onSelect: (record, selected, selectedRows) => {
          // this.selectedRowKeys = record
          // console.log(this.selectedRowKeys)
        }
        // onSelectAll: (selected, selectedRows, changeRows) => {
        //   console.log(selected, selectedRows, changeRows)
        // }
      }
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    }
  },
  methods: {
    getTableData (query) {
      // console.log(query)
      this.tableLoading = true
      var fd = new FormData()
      fd.append('per_page', this.pagination.pageSize)
      fd.append('current_page', this.pagination.current)
      if (query) {
        fd.append('query', query)
      }
      console.log(fd)
      // eslint-disable-next-line eqeqeq
      if (this.memberGroup == 0) { // 待审核表格
        examineTable(fd).then(res => {
          this.dataSource = res.result.data
          // 图片模块回显格式
          this.dataSource.forEach(item => {
            item.business_license_file.forEach(ele => {
              ele['url'] = ele.file_url
              ele['status'] = 'done'
              ele['uid'] = ele.file_id
              ele['name'] = ele.file_id
            })
            item.qualification_certificate_file.forEach(ele => {
              ele['url'] = ele.file_url
              ele['status'] = 'done'
              ele['uid'] = ele.file_id
              ele['name'] = ele.file_id
            })
          })
          Object.assign(this.pagination, { 'pageSize': Number(res.result.per_page), 'total': res.result.total, 'current': res.result.current_page })
          // console.log(this.pagination)
          // this.saveDisibled = null
          this.tableLoading = false
        })
        .catch(err => {
          this.$notification['error']({
            message: 'Error',
            description: err.message
          })
        })
      } else { // 已通过表格
        memberTable(fd).then(res => {
          this.dataSource = res.result.data
          // 图片模块回显格式
          this.dataSource.forEach(item => {
            item.business_license_file.forEach(ele => {
              ele['url'] = ele.file_url
              ele['status'] = 'done'
              ele['uid'] = ele.file_id
              ele['name'] = ele.file_id
            })
            item.qualification_certificate_file.forEach(ele => {
              ele['url'] = ele.file_url
              ele['status'] = 'done'
              ele['uid'] = ele.file_id
              ele['name'] = ele.file_id
            })
          })
          Object.assign(this.pagination, { 'pageSize': Number(res.result.per_page), 'total': res.result.total, 'current': res.result.current_page })
          // console.log(this.pagination)
          // this.saveDisibled = true
          this.tableLoading = false
        })
        .catch(err => {
          this.$notification['error']({
            message: 'Error',
            description: err.message
          })
        })
      }
    },
    handleInfo (record) {
      // console.log(record)
      this.status = true
      this.showData = JSON.parse(JSON.stringify(record)) // 深拷贝，防止表格数据被影响
      console.log(this.showData)
      this.visible = true
    },
    rowClassName () {
      return 'rowClass'
    },
    handleCancel () {
      this.showData = {}
      this.visible = false
    },
    handlePreview (file) {
      this.previewImage = file.url
      this.previewVisible = true
    },
    // 上传图片Remove
    handleRemove (file, itemIndex) {
      console.log(file)
      const index = this.showData[itemIndex].indexOf(file)
      console.log(index)
      const newFileList = this.showData[itemIndex].slice()
      newFileList.splice(index, 1)
      this.showData[itemIndex] = newFileList
      // console.log(this.showData.domains[itemIndex].value)
    },
    handlePreviewCancel () {
      this.previewVisible = false
    },
    handleOk () {
      this.$refs.showData.validate(valid => {
        console.log(this.showData)
        if (!valid) {
          return false
        } else {
          this.confirmLoading = true
          // if (!this.status) {
          //   // eslint-disable-next-line eqeqeq
          //   // if (this.showData.phone == undefined) {
          //   //   this.showData.phone = ''
          //   // }
          //   // eslint-disable-next-line prefer-const
          //   let fd = new FormData()
          //   fd.append('classic_name', this.showData.classic_name)
          //   create(fd).then(res => {
          //     // console.log(res.data)
          //     if (res.code === 200) {
          //       this.$notification['success']({
          //         message: 'Success',
          //         description: '添加成功'
          //       })
          //       this.getTableData()
          //       this.visible = false
          //     } else {
          //       this.$notification['error']({
          //         message: 'Error',
          //         description: res.message
          //       })
          //     }
          //   })
          //   .catch(err => {
          //     this.$notification['error']({
          //       message: 'Error',
          //       description: err.message
          //     })
          //   })
          // } else {
            // console.log('???????')
            // eslint-disable-next-line prefer-const
            let fd = new FormData()
            fd.append('argument_classic_id', this.showData.argument_classic_id)
            fd.append('classic_name', this.showData.classic_name)
            examineEdit(fd).then(res => {
              console.log(res.data)
              if (res.code === 200) {
                this.$notification['success']({
                  message: 'Success',
                  description: '修改成功'
                })
                this.getTableData()
                this.visible = false
              } else {
                this.$notification['error']({
                  message: 'Error',
                  description: res.message
                })
              }
            })
            .catch(err => {
              this.$notification['error']({
                message: 'Error',
                description: err.message
              })
            })
          // }
        }
      })
      setTimeout(() => {
        this.confirmLoading = false
      }, 2000)
    },
    // handleSearch () {
    //   console.log(111) // 查找密码
    //   this.searchPassword = true
    //   this.isLoginError = false
    // },
    hideModal () {
      this.searchPassword = false
      this.showData = {}
      this.itempassword = ''
    },
    handleItemSearch () {
      console.log(111)
      var fa = new FormData()
      fa.append('account', this.showData.account)
      memberSearch(fa).then(res => {
        if (res.code === 500) {
          this.isLoginError = true
          this.itempassword = ''
        } else {
          this.isLoginError = false
          this.itempassword = res.result[0].account
          console.log(this.itempassword)
        }
      })
    },
    handleSelect () {
      console.log(this.showData)
    },
    handleDelete () {
      this.confirmLoading = true
      setTimeout(() => {
        this.confirmLoading = false
      }, 2000)
    },
    handleAdd () {
      this.status = false
      this.showData = {}
      this.visible = true
    },
    // 分页
    handleTableChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getTableData(this.search)
    },
    onSearch (value) {
      console.log(value)
      this.getTableData(value)
    },
    examinePass (record) {
      var fd = new FormData()
      fd.append('membership_id', record.membership_id)
      examineEdit(fd).then(res => {
        if (res.code === 200) {
          this.$notification.success({
            title: '成功',
            message: '审核成功'
          })
          this.getTableData()
        } else {
          this.$notification.error({
            title: res.code,
            message: res.message
          })
        }
      }).catch(err => {
          this.$notification.error({
            title: err.code,
            message: err.message
          })
      })
    },
    fuckOff (record) {
      var fd = new FormData()
      if (record.status === 1 || record.status === 3) {
        fd.append('status', 2)
      } else {
        fd.append('status', 3)
      }
      fd.append('membership_id', record.membership_id)
      statusEdit(fd).then(res => {
        if (res.code === 200) {
          this.$notification.success({
            title: '成功',
            message: '操作成功'
          })
          this.getTableData()
        } else {
          this.$notification.error({
            title: res.code,
            message: res.message
          })
        }
      }).catch(err => {
          this.$notification.error({
            title: err.code,
            message: err.message
          })
      })
    },
    onDelete (record) {
      var fd = new FormData()
      fd.append('membership_id', record.membership_id)
      examineDelete(fd).then(res => {
        if (res.code === 200) {
          this.$notification.success({
            title: '成功',
            message: '删除成功'
          })
          this.getTableData()
        } else {
          this.$notification.error({
            title: res.code,
            message: res.message
          })
        }
      }).catch(err => {
          this.$notification.error({
            title: err.code,
            message: err.message
          })
      })
    }
  },
  watch: {
    search: function (newVal, oldVal) {
      delay(() => {
        this.getTableData(newVal)
      }, 1000)
    }
  },
  created () {
    this.getTableData()
  }
}
</script>

<style lang="less" scoped>
/deep/ .rowClass{
  background-color: #fff;
}
/deep/ .ant-table-thead > tr > th {
  background: #fafafa !important;
}
.tips{
  color: red;
}
</style>
